/* eslint-disable vue/valid-v-model */
<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="title"
    size="80%"
    :visible.sync="visibility"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="来源单号">
              <el-input v-model="temp.sourceOrderCode" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划生产日期">
              <el-date-picker
                v-model="temp.expectManufactureDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签">
              <el-select v-model="temp.tag" :disabled="disabled">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="生产项目">
              <el-input v-model="temp.project" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="领料仓库">
              <el-select v-model="temp.fromWarehouseId" :disabled="disabled">
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓库">
              <el-select v-model="temp.toWarehouseId" :disabled="disabled">
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="temp.memo" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="产品" prop="goodsCode">
          <el-button
            :disabled="disabled"
            icon="el-icon-plus"
            size="mini"
            circle
            class="custome-el-button-circle"
            @click="handleOpenSearchProductionGoodsDialog"
          />
        </el-form-item>
        <el-form-item>
          <el-table
            v-if="temp.goodsList && temp.goodsList.length > 0"
            :data="temp.goodsList"
            highlight-current-row
            style="margin: 3px"
          >
            <el-table-column label="货号" prop="goodsCode" width="150px" />
            <el-table-column
              label="货品简称"
              prop="goodsAbbr"
              min-width="150px"
            />
            <el-table-column
              label="识别码"
              prop="goodsFullCode"
              width="150px"
            />
            <el-table-column label="批号" width="150px">
              <template slot-scope="{ row }">
                <el-input v-model="row.goodsBatchCode" :disabled="disabled" />
              </template>
            </el-table-column>

            <el-table-column label="数量" width="180px">
              <template slot-scope="{ row }">
                <el-input
                  v-model="row.expectQuantity"
                  :disabled="disabled"
                  class="input-with-select"
                >
                  <el-select slot="append" v-model="row.unit">
                    <el-option
                      v-for="item in tagOptions"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    />
                  </el-select>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="重量" width="180px">
              <template slot-scope="{ row }">
                <el-input
                  v-model="row.weight"
                  :disabled="disabled"
                  class="input-with-select"
                >
                  <el-select
                    slot="append"
                    v-model="row.weightUnit"
                    placeholder=""
                  >
                    <el-option
                      v-for="item in unitOptions"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    />
                  </el-select>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="生产日期" width="150px">
              <template slot-scope="{ row }" class="input-with-date">
                <el-date-picker
                  v-model="row.productionDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :disabled="disabled"
                />
              </template>
            </el-table-column>
            <el-table-column label="失效日期" width="150px">
              <template slot-scope="{ row }">
                <el-date-picker
                  v-model="row.expirationDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :disabled="disabled"
                />
              </template>
            </el-table-column>
            <el-table-column width="60px">
              <template slot-scope="{ row }">
                <el-tooltip effect="dark" content="删除" placement="top-start">
                  <el-button
                    :disabled="disabled"
                    icon="el-icon-delete"
                    size="mini"
                    circle
                    class="danger-color"
                    @click="handleRemoveProductionGoods(row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <SearchGoods
          :visible.sync="searchGoodsDialogVisible"
          :show-goods-batch="false"
          :immediate="false"
          @success="handleSearchGoods"
        />
        <el-form-item v-if="dialogStatus !== 'view'">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleCommit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  saveManufactureOrder,
  updateManufactureOrder
} from '@/api/mes/manufactureOrder.js'
import { formatDate, getBeginDay, formatDateBatchCode } from '@/utils'

import SearchGoods from '@/components/SearchGoods'

export default {
  components: { SearchGoods },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    dialogStatus: {
      required: true,
      type: String,
      default: 'create'
    },
    orderType: {
      type: Number,
      default: 1
    },
    tagOptions: {
      type: Array,
      default: null
    },
    warehouseOptions: {
      type: Array,
      default: null
    },
    unitOptions: {
      type: Array,
      default: null
    },
    saveSplitCurrent: {
      type: Object,
      default: null
    }
  },
  data() {
    const isCodeLength = (rule, value, callback) => {
      if (this.temp.goodsList.length > 0) {
        callback()
      } else {
        return callback(new Error('产品不可为空'))
      }
    }
    return {
      loading: false,
      temp: {
        sourceOrderCode: null,
        tag: null,
        fromWarehouseId: null,
        toWarehouseId: null,
        expectManufactureDate: null,
        reconstitutionStatus: 0,
        memo: null,
        goodsList: [],
        orderType: 0
      },
      rules: {
        goodsCode: [
          { required: true, validator: isCodeLength, trigger: 'blur' }
        ]
      },
      searchGoodsDialogVisible: false,
      disabled: false,
      title: ''
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      this.$nextTick(() => {
        if (value) {
          this.temp.orderType = this.orderType
          this.temp.expectManufactureDate = formatDate(getBeginDay(0))
        }
      })
    },
    saveSplitCurrent: {
      handler(data) {
        if (this.dialogStatus === 'create') {
          this.$refs.dataForm.resetFields()
        } else {
          this.temp = data
        }
      },
      deep: true
    },
    dialogStatus(value) {
      if (value === 'view') {
        this.disabled = true
        this.title = '查看'
      } else if (value === 'create') {
        this.disabled = false
        this.title = '新建生产通知单'
        this.temp = this.$options.data().temp
      } else {
        this.disabled = false
        this.title = '更新生产通知单'
      }
    }
  },
  methods: {
    handleOpenSearchProductionGoodsDialog() {
      this.searchGoodsDialogVisible = true
    },
    handleSearchGoods(goods) {
      const currentGoods = Object.assign({}, goods)
      currentGoods.productionDate = formatDate(getBeginDay(0))
      currentGoods.goodsBatchCode = formatDateBatchCode(getBeginDay(0))
      this.temp.goodsList.push(currentGoods)
    },
    handleRemoveProductionGoods(row) {
      this.temp.goodsList.splice(this.temp.goodsList.indexOf(row), 1)
    },
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      let msg = null
      this.temp.goodsList.forEach((e) => {
        e.type = 1
        if (!e.goodsBatchCode) {
          msg = '请输入货品【' + e.goodsCode + '】的批号'
          return
        }
        if (!e.expectQuantity) {
          msg = '请输入货品【' + e.goodsCode + '】的数量'
          return
        }
      })
      if (msg) {
        this.$message.warning(msg)
        return
      }
      console.log(this.temp)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveManufactureOrder(this.temp).then((response) => {
            if (this.dialogStatus === 'create') {
              this.$emit('save', this.temp)
              this.visibility = false
            } else {
              updateManufactureOrder(this.temp).then((res) => {
                this.$emit('save', this.temp)
                this.visibility = false
                this.$message.success('更新成功')
                this.$refs.dataForm.resetFields()
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.input-with-select .el-select .el-input {
  width: 80px;
}
.cell .el-date-editor.el-input {
  width: 140px;
}
</style>
